<template>
    <div class="vantList">
        <PullRefresh v-model="isLoading" @refresh="onRefresh">
            <Skeleton :row="21" :loading="isSkeleton">
                <div class="list" v-if="list.length > 0">
                    <div class="item" @click="openEvaluateModal(allClass,true)">
                        <div class="imgBox">
                            <img src="../../images/class1.png">
                        </div>
                        <div class="label">
                            <span>{{allClass.scorePraise}}</span>
                            <span>{{allClass.scoreCritique}}</span>
                        </div>
                        <div class="name">全班</div>
                    </div>
                    <div class="item" v-for="(item,index) of list" :key="index" @click="openEvaluateModal(item,false)">
                        <div class="imgBox">
                            <VanImage
                            round
                            width="1.44rem"
                            height="1.44rem"
                            :src="item.portraitImgUrl"
                            />
                        </div>
                        <div class="label">
                            <span>{{item.scorePraise}}</span>
                            <span>{{item.scoreCritique}}</span>
                        </div>
                        <div class="name">{{item.name}}</div>
                    </div>
                </div>
                <div class="empty" v-else>
                    <Empty :image="emptyType" :description="emptyText" />
                </div>
            </Skeleton>
        </PullRefresh>
    </div>
</template>

<script>
import { PullRefresh,Image as VanImage,Empty,Skeleton } from 'vant';
export default {
    name:'userList',
    components:{
        PullRefresh,
        VanImage,
        Empty,
        Skeleton
    },
    data(){
        return {
            allClass:{
                name:'全班',
                ids:[],
                scorePraise:0,
                scoreCritique:0,
            },
            list: [],
            isLoading:false,
            emptyType:'',     //错误显示类型
            emptyText:'',     //错误提示
            isSkeleton:false  //骨架显示
        }
    },
    methods:{
        onRefresh() {
            this.onLoad();
            this.isLoading = false;
        },
        onLoad() {
            this.isSkeleton = true;
            let list = [];
            this.allClass.ids = [];
            this.allClass.scorePraise = 0;
            this.allClass.scoreCritique = 0;
            this.$store.dispatch('studentAppraise/GetStudentsAndReviewList').then(res=>{
                this.isSkeleton = false;
                if(res.status == 200 && res.data.length > 0){
                    list = res.data;
                    this.list = list;
                    list.forEach(item => {
                        this.allClass.scorePraise += item.scorePraise;
                        this.allClass.scoreCritique += item.scoreCritique;
                        this.allClass.ids.push(item.id);
                    });
                }else{
                    this.emptyType = 'default';
                    this.emptyText = '暂无数据';
                }
            }).catch(err => {
                this.list = [];
                this.emptyType = 'error';
                this.emptyText = err;
                this.isSkeleton = false;
            });
        },
        openEvaluateModal(item,isAllStudent){
            this.$emit('openEvaluateModal');
            this.$store.commit('studentAppraise/setIsAllStudent',isAllStudent);
            this.$store.commit('studentAppraise/setCurrentPage',0);
            this.$store.commit('studentAppraise/setStudentsInfo',item);
        }
    }
}
</script>

<style lang="less" scoped>
.vantList{
    position: absolute;
    top:1.72rem;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    overflow-y: auto;
}
.empty{
    width:100%;
    position: fixed;
    top: 30%;
}
.list{
    display: flex;
    flex-wrap:wrap;
    padding-bottom:0.3rem;
    .item{
        width: 33.33%;
        text-align: center;
        position: relative;
        margin-top: 0.3rem;
        .imgBox{
            width:1.44rem;
            height:1.44rem;
            background-color:#fff;
            border:0.06rem solid #fff;
            border-radius:1.5rem;
            box-shadow: 0 0 0.06rem rgba(0, 0, 0, 0.15);
            margin:0 auto;
            img{
                width:1.44rem;
                height:1.44rem;
            }
        }
        .label{
            height:0.38rem;
            width:1.5rem;
            background-color:#fff;
            box-shadow: 0 0 0.06rem rgba(0, 0, 0, 0.15);
            border-radius: 0.38rem;
            position: absolute;
            top:1.33rem;
            left:0;
            right:0;
            margin:0 auto;
            display: flex;
            font-size:0.22rem;
            span{
                width:50%;
                text-align: center;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                color:#128FEF;
            }
            span:last-child{
                color:#FF0000;
            }
            span:after{
                content: '';
                width:0.01rem;
                height: 0.18rem;
                background-color:#E6E6E6;
                position: absolute;
                right:0;
                top: 0.09rem;
            }
            span:last-child:after{
                width:0;
                height:0;
            }
        }
        .name{
            font-size:0.28rem;
            color:#000;
            margin-top: 0.26rem;
        }
    }
}
</style>

